import * as echarts from "echarts";

const colorRanges = [
  {
    color: "rgba(142, 149, 158, 1)",
    start: 0,
    end: 25,
  },
  {
    color: "rgba(255, 76, 38, 1)",
    start: 25,
    end: 50,
  },
  {
    color: "rgba(255, 161, 38, 1)",
    start: 50,
    end: 75,
  },
  {
    color: "rgba(0, 165, 19, 1)",
    start: 75,
    end: 100,
  },
];
const seriesData = ["36%", "60%", "40%", "50%", "80%", "30%", "15%"].map(
  (item) => {
    const value = parseFloat(item.replace("%", ""));
    let color = "rgba(142, 149, 158, 1)"; // 默认颜色

    for (const range of colorRanges) {
      if (value >= range.start && value < range.end) {
        color = range.color;
        break;
      }
    }

    return {
      value: value,
      itemStyle: {
        color: color,
        borderRadius: 8,
      },
    };
  }
);
export const chartOption = (): echarts.EChartsOption => {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: ["1", "2", "3", "4", "5", "6", "7"],
        axisTick: {
          show: true,
          alignWithLabel: true,
        },
        axisLine: {
          lineStyle: {
            color: "#79828F"||"#F2F5FA", // 轴线颜色
            width: 2, // 轴线宽度
            type: "solid", // 轴线样式（solid, dashed, dotted）
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          formatter: "{value}%",
          color: "#79828F",
        },

        axisLine: {
          show: true,
          lineStyle: {
            color: "#F2F5FA", // 轴线颜色
            width: 2, // 轴线宽度
            type: "solid", // 轴线样式（solid, dashed, dotted）
          },
        },
      },
    ],
    series: [
      {
        name: "Direct",
        type: "bar",
        barWidth: "60%",
        data: seriesData,
      },
    ],
  };
};
